<template>
  <div>
     <div>
    <!-- 上 -->
    <el-card  class="co-middle">
          <el-form :inline="true"  class="demo-form-inline">
             <el-form-item label="司机账号:" label-width="80px">
    <el-input v-model="pageing.account" placeholder="请输入司机账号" clearable></el-input>
  </el-form-item >
  <el-form-item label="司机姓名:" label-width="160px">
      <el-input v-model="pageing.name" placeholder="请输入司机姓名" clearable></el-input>
  </el-form-item >
   <el-form-item label="司机手机号:"  label-width="160px">
    <el-input v-model="pageing.phone" placeholder="请输入司机手机号" clearable></el-input>
  </el-form-item>
        </el-form>
        <!--  -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="所属机构:" label-width="78px">
  <template>
      <Treeselect
      style="margin-left:10px;"
       class="treeselect-main"
                v-model="pageing.agentId"
                :options="tree"
                :normalizer="normalizer"
                placeholder="请选择起始地机构"
                 :append-to-body="true"
              />
     </template>
  </el-form-item>
   <el-form-item class="anniu">
    <el-button type="danger" @click="search">搜索</el-button>
    <el-button @click="reset">重置</el-button>
  </el-form-item>

       </el-form>
      </el-card>
      <!-- 下 -->
      <el-card>
        <el-table  stripe :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="序号" width="100" type="index"></el-table-column>
    <el-table-column prop="account" label="司机账号" width="220"></el-table-column>
    <el-table-column prop="name" label="司机姓名" width="220"> </el-table-column>
    <el-table-column prop="mobile" label="司机电话"  width="220"> </el-table-column>
    <el-table-column prop="truck.licensePlate" label="关联车辆" width="220"></el-table-column>
    <el-table-column prop="agency.name" label="所属机构"  width="220"> </el-table-column>
    <el-table-column prop="workStatus" label="工作状态"  width="220">
 <template #default="{row}">
            <el-badge is-dot class="item"  type="success" v-if="row.workStatus"></el-badge>
             <el-badge is-dot class="item"  v-else></el-badge>
             {{row.workStatus?'上班':'不上班'}}
           </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作"  width="120">
      <template #default="{row}">
        <el-button @click="$router.push(`drivermanagement/driverInfo/${row.userId}`)" type="text" size="small">查看</el-button>
         <el-divider direction="vertical"></el-divider>
        <el-button @click="handleClick(row)" type="text" size="small" >配置车辆</el-button>
      </template>
    </el-table-column>
  </el-table>
      </el-card>
  </div>
  <!-- 配置车辆对话框 -->
  <el-dialog
  title="车辆配置"
  :visible.sync="showDialog"
  width="30%">
  <el-row style="margin-bottom:10px;">配置车辆需满足以下条件：</el-row>
  <el-row type="flex" justify="space-around" style="margin-bottom:10px;">
    <el-col>
      <span style="width: 16px; height: 16px; background: rgb(250, 252, 255); border: 1px solid rgb(235, 238, 245); border-radius: 50%; display: inline-block; text-align: center; margin-right: 6px; line-height: 14px;">1</span>
      司机信息已完善
      </el-col>
    <el-col>
      <span style="width: 16px; height: 16px; background: rgb(250, 252, 255); border: 1px solid rgb(235, 238, 245); border-radius: 50%; display: inline-block; text-align: center; margin-right: 6px; line-height: 14px;">2</span>
      司机已设置排班
      </el-col>
  </el-row>
  <el-row style="margin-bottom:10px;">
    <span style="width: 16px; height: 16px; background: rgb(250, 252, 255); border: 1px solid rgb(235, 238, 245); border-radius: 50%; display: inline-block; text-align: center; margin-right: 6px; line-height: 14px;">3</span>
    司机绑定车辆未在启用状态
    </el-row>
  <span slot="footer" class="dialog-footer">
    <el-button @click="showDialog = false" size="mini">取 消</el-button>
    <el-button type="danger" @click="submit" size="mini">确 定</el-button>
  </span>
</el-dialog>
<!-- 第二个弹框 -->
<el-dialog
  title="配置车辆"
  :visible.sync="twoDialog"
  width="40%"
 >
    <el-card style=" background-color: #fbfafa;margin-bottom:15px;">
    <el-row type="flex" justify="space-around">
      <el-col>司机编号：{{form.userId}}</el-col>
      <el-col>司机名称：{{form.name}}</el-col>
    </el-row>
    <el-row type="flex" justify="space-around">
      <el-col>司机电话：{{form.mobile}}</el-col>
      <el-col v-if="form.agency">所属机构：{{form.agency.name}}</el-col>
    </el-row>
  </el-card>
  <!--  -->
  <span>配置车辆：</span>
  <el-select
  @change="change"
  value-key="id"
    v-model="value"
    placeholder="请选择文章标签">
    <el-option
      v-for="item in tableData"
      :key="item.id"
      :label="item.truck.licensePlate"
      :value="item.truck.id">
    </el-option>
  </el-select>
  <!--  -->
  <el-table
  :header-cell-style="{background:'#f8faff',color:'#818693'}"
      :data="[form]"
      style="width: 100%;margin-top:15px;">
      <el-table-column prop="truck.licensePlate" label="车牌号" width="180" />
      <el-table-column  label="车辆状态" width="180" >
 <template #default="{row}">
            <el-badge is-dot class="item"  type="success" v-if="row.workStatus"></el-badge>
             <el-badge is-dot class="item"  v-else></el-badge>
             {{row.workStatus?'可用':'不可用'}}
           </template>
      </el-table-column>
      <el-table-column  label="操作" width="180">
        <template #default="{row}">
          <!-- {{row}} -->
               <el-button  type="text" size="small" @click="$router.push(`drivermanagement/driverCart/${row.truck.id}`)">查看</el-button>
              <el-divider direction="vertical"></el-divider>
             <el-button style="color:red;" type="text"  size="small" @click="remove(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  <span slot="footer" class="dialog-footer" >
    <el-button @click="twoDialog = false" type="danger">确 定</el-button>
    <el-button  @click="twoDialog = false">取 消</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { getDriverList, getDriverListInfoTwo } from '@/api/drivermanagement'
import { treeShapedApi } from '@/api/institution'
export default {
  name: 'driver-management',
  components: { Treeselect },
  data () {
    return {
      userId: null,
      // userId: this.$route.params.id,
      twoList: [],
      options: [{
        value: 'HTML',
        label: 'HTML'
      }, {
        value: 'CSS',
        label: 'CSS'
      }, {
        value: 'JavaScript',
        label: 'JavaScript'
      }],
      value: [],
      twoDialog: false,
      showDialog: false,
      formInline: {
        user: '',
        region: ''
      },
      tableData: [],
      pageing: {
        page: 1,
        pageSize: 10,
        account: '',
        name: '',
        phone: '',
        agentId: null
      },
      tree: [],
      form: {},
      idValue: ''

    }
  },
  created () {
    this.getDriver()
    this.initTree()
  },
  methods: {
    change (id) {
      console.log(id)
      this.idValue = id
      // this.tableData.id = this.form.id
      // this.form = this.tableData.map(item => {
      //   console.log(item.id)
      //   // console.log(this.tableData.id)
      //   let obj = {}
      //   if (item.id === id) { obj = item }
      //   return obj
      // })
      this.tableData.map(item => {
        if (item.truck.id === id) {
          this.form = item
        }
        return item
      })
      // console.log(this.form)
    },
    // 点击第一个确定按钮
    submit () {
      this.twoDialog = true
    },
    // 配置车辆
    async  handleClick (row) {
      this.showDialog = true
      console.log(row)
      this.form = row
      this.value = this.form.truck.id
      console.log(this.value)
    },
    normalizer (node) {
      // console.log(node)
      // 当子节点也就是children=[]时候去掉子节点
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children && node.children.length > 0 ? node.children : 0
      }
    },
    // 下拉树形结构
    async initTree () {
      const res = await treeShapedApi()
      this.tree = JSON.parse(res.data)
      // console.log(this.tree)
    },
    async getDriver () {
      const res = await getDriverList(this.pageing)
      console.log(res)
      this.tableData = res.data.items
      // this.userId = res.data.items.userId

      // const arr = []
      // this.value.map(item => {
      //   console.log(item.truck.licensePlate)
      //   arr.push(item.truck.licensePlate)
      //   return arr
      // })
      // console.log(arr)
      // this.value = arr

      console.log(this.value)
      this.twoList = res.data.items
      // 配置车辆详情接口
      // const re = await getDriverListInfoTwo(this.userId)
      const re = await getDriverListInfoTwo()
      console.log(re)
      // this.twoList = re.data
      // const r = await getcarInfo(this.userId)
      // console.log(r)
    },
    // 搜索
    async search () {
      const res = await getDriverList({ ...this.pageing })
      // console.log(res)
      this.tableData = res.data.items
    },
    // 点击重置
    reset () {
      this.pageing = {
        page: 1,
        pageSize: 10
      }
      this.getDriver()
    }
  }
}
</script>

<style lang="scss" scoped>
.anniu {
  margin-left: 60px;
}
.co-middle {
  margin-bottom: 20px;

}
.demo-form-inline {
  display: flex;
}
.vue-treeselect__single-value {
  display: none;
}
::v-deep .vue-treeselect__control {
    // padding-left: 5px;
    // padding-right: 5px;
    display: table;
    table-layout: fixed;
    /* width: 100%; */
    width: 220px;
    height: 36px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #fff;
    transition-duration: 200ms;
    transition-property: border-color, box-shadow, width, height, background-color, opacity;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
// .two {
//   background:'#f8faff';
//   color:red
// }
</style>
